<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style href="css/common.css" type="text/css" rel="stylesheet"></style> -->
    <link rel="stylesheet" href="css/common.css" type="text/css">
</head>
<body>
    <div id="app">
        <!-- 过滤器 {{message | formatString}} -->
        <!-- {{ otherMsg  () }} -->
        <!-- <div v-model="html"> -->
            <!-- v-bind:src  简写形式： :src-->
            <!-- src属于指令，通常用于更改这个标签属性值的 -->
            <!-- <img :src="imgSrc" alt="" height="500px" width="500px"> -->
            <!-- v-bind用来绑定一个元素的属性,用来动态改变属性的值 -->
            <!-- v-bind是一个指令，v-on是事件 -->
            <!-- <a v-bind:href="url">heihei</a> -->

            <!-- <button v-on:click="handleClick">这是个按钮，戳他</button> -->
        <!-- </div> -->

        <!-- <img :src="imgUrl" alt=""  height="500px" width="500px"> -->

        <!-- <div :class="{'bgcolor':hasColor, 'forecolor':hasNum}"> -->
         <!--  数组 <div :class="[hasColor?'bgcolor':'',colorCls]">    -->

            <!-- 计算属性 <div :class="clsProp">  -->
            
                <!-- <p v-if="age===14">《泡沫》</p>
                <p v-else-if="age===100">？？？</p>
                <p v-else>《摩天动物园》</p>
                <template v-if="age===14">
                    <p>初入</p>
                </template>
                <template v-else-if="age===100">
                    <p>披荆斩棘</p>
                </template>
                <template v-else>
                    <p>涅槃重生</p>
                </template> -->

                <ul>
                    <li v-for="(m,index) of meatSort">{{index+1}}-{{m.name}}-{{m.price}}</li>
                    
                </ul>

                <ul>
                    <li v-for="(u,key,index) in user">{{index}}-{{key}}-{{u}}</li>
                </ul>
    </div>
    
    <script src="http://cdn.jsdelivr.net/npm/vue"></script>


    <script>
        var app = new Vue({
            el:'#app',
            data:{
                age:14,
                meat:[
                    {name:'鸡肉',price:25},
                    {name:'鸭肉',price:20},
                    {name:'鱼肉',price:15},
                    {name:'猪肉',price:35},
                ],
                user:{
                    userName:'火锅',
                    passWord:'122345',
                    number:'1234783214'
                }
                // message:"《另一个童话》：",
                // html:"<h1>漂亮的小姐姐</h1>",
                // imgSrc:"./imgs/wv_1572449010696.jpg",
                // url:"http://baidu.com",
                // imgUrl:"./imgs/wv_1572449010696.jpg",
                // hasColor:true,
                // hasNum:false,
                // // bgcolorCls:this.hasColor?'bgcolor':'',
                // colorCls:'forecolor'
            },
            //computed 计算属性 ，属性没有前后顺序区别
            computed:{
                newMsg:function(){
                  return  this.message + "吃货";
                },
                bgcolorCls:function(){
                    return this.hasColor?'bgcolor':''
                },
                clsProp:function(){
                    return {
                        bgcolor:this.hasColor,
                        forecolor:this.hasNum
                    }
                },
                meatSort:function(){
                    return this.meat.sort(function(a,b){
                        return a.price-b.price;
                    });
                }
            },

            filters:{
                formatString:function(val){
                return val + "G.E.M";
                }
            },

            methods:{
                handleClick:function(){
                    console.log("啥也没有");
                },
                otherMsg:function(){
                    return this.message +"火锅，串串，麻辣烫";
            }
        },
            
            mounted:function(){
                console.log('她飘过'+new Date().toLocaleString());
            },
            created:function(){
                console.log('她出现' +new Date().toTimeString());
            }
        })
    </script>

</body>
</html>